<template>
  <div style="padding: 20px; height: 75vh">
    <el-tabs style="height: 100%" v-model="activeTab">
      <el-tab-pane label="基础信息" style="height: 100%" name="first">
        <div style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            background-color: #f0f2f8;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            padding: 15px;
          ">
          <div style="
              height: 100%;
              width: 60%;
              background-color: white;
              padding: 10px 20px;
              box-sizing: border-box;
            ">
            <form-divider title="表单基础信息"></form-divider>
            <el-form v-if="flow" label-width="90px" style="margin-top: 20px; width: 80%">
              <el-form-item label="业务表单" v-if="!flow.FLOW_ID">
                <el-select v-model="flow.FLOW_BusinessID" @change="chooseBusiness">
                  <el-option v-for="form in businesses" :key="form.BF_ID" :label="form.BF_Name"
                    :value="form.BF_ID"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="名称">
                <el-input v-model="flow.FLOW_Name"></el-input>
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="flow.FLOW_Desc" type="textarea" :rows="4"></el-input>
              </el-form-item>
              <el-form-item>
                <el-checkbox v-model="flow.FLOW_FileEnable">
                  允许在通过、回退、拒绝、转交、保存、评论中上传文件
                </el-checkbox>
              </el-form-item>

              <!-- <el-form-item>
                <el-checkbox v-model="flow.FLOW_IsScore">
                  是否计入外勤分数（该流程发起者将计入案件外勤贡献率统计表中）
                </el-checkbox>
              </el-form-item>
              <el-form-item label="分数" v-if="flow.FLOW_IsScore">
                <div style="display: flex; align-items: center">
                  <el-slider
                    style="width: 200px"
                    v-model="flow.FLOW_Score"
                    :min="0"
                    :max="100"
                  ></el-slider>
                  <span style="margin-left: 10px">
                    {{ flow.FLOW_Score }}
                  </span>
                </div>
              </el-form-item> -->
              <div class="form-item" style="margin-left: 10px">
                <div class="form-item-label-top">任务列表</div>
                <el-table :data="flow.Jobs" v-if="flow && flow.FLOW_ID" style="margin-left: 80px">
                  <el-table-column label="任务">
                    <template slot-scope="scope">
                      <span>[{{ scope.row.JobBusinessName }}]</span>
                      <span>[{{ scope.row.JobFlowName }}]</span>
                      <span>{{ scope.row.FLJ_Name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="备注">
                    <template slot-scope="scope">
                      <span>{{ scope.row.FLJ_Remark }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="权重" width="50px">
                    <template slot-scope="scope">
                      <span>{{ scope.row.FLJ_Weight }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="限制天数" width="80px">
                    <template slot-scope="scope">
                      <span>{{ scope.row.FLJ_LimitDays }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column width="80px">
                    <template slot="header">
                      <el-button type="text" size="medium" slot="reference" icon="el-icon-plus"
                        @click="addJobVis = true">
                        添加
                      </el-button>
                    </template>
                    <template slot-scope="scope">
                      <i class="el-icon-delete" @click.stop="doRemoveJob(scope.$index)"></i>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <div class="form-item" style="margin-left: 10px">
                <div class="form-item-label-top">权限配置</div>
                <el-table :data="flow.Roles" v-if="flow && flow.FLOW_ID" style="margin-left: 80px">
                  <el-table-column label="角色">
                    <template slot-scope="scope">
                      <span>{{ scope.row.RL_Name }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="权限">
                    <template slot-scope="scope">
                      <span>{{ scope.row.FRL_TypeDesc }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column width="80px">
                    <template slot="header">
                      <el-button type="text" size="medium" slot="reference" icon="el-icon-plus"
                        @click="addRoleVis = true">
                        添加
                      </el-button>
                    </template>
                    <template slot-scope="scope">
                      <i class="el-icon-delete" @click.stop="doRemoveRole(scope.$index)"></i>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-form>
          </div>

          <div style="
              height: 100%;
              width: 39%;
              display: block;
              background-color: white;
              padding: 15px 20px;
              box-sizing: border-box;
            ">
            <div class="right-section">
              <form-divider title="业务表单字段"></form-divider>
              <template v-if="businessFields && businessFields.length > 0">
                <div v-for="field in businessFields" :key="field.FF_Guid">
                  <div style="flex: 1">
                    <formField :formField="field" :isBusiness="false" />
                  </div>
                </div>
              </template>
              <div style="padding: 20px 30px; color: #c8c8c8" v-else>
                表单不包含业务字段
              </div>
            </div>
            <!-- <div class="right-section-bottom">
              <el-button @click="doSave" type="primary">保存</el-button>
            </div> -->
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="表单设计" style="height: 100%" name="second" v-if="flow && flow.FLOW_ID">
        <div style="
            height: 100%;
            width: 100%;
            display: flex;
            background-color: #f3f3f3;
            justify-content: space-between;
          " class="form-design">
          <div class="button-list">
            <form-divider title="组件列表"></form-divider>
            <div style="overflow: auto; height: 90%; width: 100%">
              <div v-for="field in fields" :key="field.FFLD_ID" class="field-button">
                <div class="field-button-label">
                  {{ field.FFLD_Label }}
                </div>
                <div>
                  <i @click="doAddField(field)" class="el-icon-circle-plus"
                    style="color: #c8c8c8; font-size: 16px; cursor: pointer"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="form-preview">
            <draggable v-if="flow" v-model="flow.Fields" :animation="340" @start="startDrag" @end="endDrag">
              <div v-for="(field, index) in customFields" :key="index" @click="editingField = field"
                class="form-field-container">
                <div style="display: flex; position: relative">
                  <div class="form-field-item" :class="editingField == field ? 'form-field-actived' : ''">
                    <formField style="background-color: white" :formField="field" :isBusiness="false" />
                  </div>
                  <div v-if="
                    editingField == field && !editingField.FF_BusinessFieldID
                  " style="
                      position: absolute;
                      top: 0;
                      right: -34px;
                      z-index: 1000;
                      padding: 5px;
                      display: flex;
                      flex-direction: row;
                      background-color: white;
                    ">
                    <i class="el-icon-delete" @click.stop="removeField(field)" style="font-size: 20px"></i>
                  </div>
                </div>
              </div>
              <el-popover placement="right" width="200" v-model="addFieldVis" trigger="click">
                <div v-for="field in fields" :key="field.FFLD_ID" style="margin: 5px">
                  <el-button @click="doAddField(field)">
                    {{ field.FFLD_Label }}
                  </el-button>
                </div>
              </el-popover>
            </draggable>
          </div>

          <div class="field-config">
            <div class="right-section">
              <form-divider title="字段配置"></form-divider>
              <fieldConfig v-model="editingField" :isBusiness="false" style="margin-top: 16px" :steps="flow.Steps"
                :fieldStepTypes="fieldStepTypes" />
            </div>
            <!-- <div class="right-section-bottom">
              <el-button @click="doSave" type="primary">保存</el-button>
            </div> -->
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="流程管理" style="height: 100%; width: 100%" name="third" v-if="flow && flow.FLOW_ID">
        <flow :flow="flow" :actions="flow.Business.actions" :conditionFields="conditionFields"></flow>
        <!-- <div style="position: fixed; right: 60px; bottom: 100px">
          <el-button type="primary" @click="doSave">保存</el-button>
        </div> -->
      </el-tab-pane>
    </el-tabs>
    <el-button @click="doSave" round type="warning" style="
        position: absolute;
        right: 50px;
        bottom: 40px;
        width: 120px;
        height: 60px;
        font-size: 16px;
      ">
      保存
    </el-button>
    <el-drawer title="添加任务" :visible.sync="addJobVis" direction="rtl" append-to-body size="470px">
      <el-form label-width="100px">
        <el-form-item label="名称">
          <el-input v-model="flowJob.FLJ_Name" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item label="任务流程">
          <el-select v-model="flowJob.FLJ_JobFlowID" style="width: 300px">
            <el-option v-for="flow in jobFlows" :key="flow.FLOW_ID" :label="'[' + flow.BF_Name + ']' + flow.FLOW_Name"
              :value="flow.FLOW_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="限制天数">
          <el-input-number style="width: 300px" v-model="flowJob.FLJ_LimitDays" placeholder="请输入该任务需在发布后几天内完成"
            :min="1"></el-input-number>
        </el-form-item>
        <!-- <el-form-item label="权重">
          <el-input-number
            style="width: 300px"
            v-model="flowJob.FLJ_Weight"
            placeholder="请输入该任务权重，用于后续计算绩效"
            :min="1"
            :step="10"
          ></el-input-number>
        </el-form-item> -->
        <el-form-item label="备注">
          <el-input v-model="flowJob.FLJ_Remark" type="textarea" rows="4" style="width: 300px"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="doAddJob()">添加</el-button>
          <el-button type="text" @click="addJobVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>

    <el-drawer title="添加权限" :visible.sync="addRoleVis" direction="rtl" append-to-body size="470px">
      <el-form label-width="100px">
        <el-form-item label="角色">
          <el-select v-model="flowRole.FRL_RoleID" style="width: 300px">
            <el-option v-for="role in roles" :key="role.RL_ID" :label="role.RL_Name" :value="role.RL_ID"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限">
          <el-select filterable v-model="flowRole.FRL_Type">
            <el-option v-for="item in roleTypes" :key="item.EnumValue" :label="item.Description"
              :value="item.EnumValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="doAddRole()">添加</el-button>
          <el-button type="text" @click="addRoleVis = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>
<script>
import {
  getFlow,
  saveFlow,
  getBusinesses,
  getBusiness,
  getFlows,
  getFlowFieldStepTypes,
  getRoles,
  getFlowRoleTypes
} from '@/api/flowCenter/flow/flowProcess'
import { getFields } from '@/api/flowCenter/field/fieldManage'
import { generateGUID } from '@/utils/guid'
import flow from '@/views/web/flowManage/components/flow'
import formField from '@/views/web/flowManage/components/formField'
import draggable from 'vuedraggable'
import fieldConfig from '@/views/web/flowManage/components/formField/config/fieldConfig'
import formDivider from '@/views/components/formDivider.vue'
export default {
  components: {
    flow,
    formField,
    draggable,
    fieldConfig,
    formDivider
  },
  data: function () {
    return {
      roles: [],
      fieldStepTypes: [],
      activeTab: 'first',
      flow: null,
      jobFlows: null,
      roleTypes: [],

      flowJob: {},
      flowRole: {},
      businesses: [],
      editingField: null,
      fields: null,
      addFieldVis: false,
      addJobVis: false,
      addRoleVis: false,
    }
  },
  computed: {
    businessFields() {
      return this.flow && this.flow.Fields
        ? this.flow.Fields.filter((x) => x.FF_BusinessFieldID > 0)
        : []
    },
    customFields() {
      return this.flow && this.flow.Fields
        ? this.flow.Fields.filter((x) => !x.BFF_InAction)
        : []
    },
    conditionFields() {
      return this.flow && this.flow.Fields
        ? this.flow.Fields.filter((x) => x.FFLD_ConditionAble == true)
        : []
    },
  },
  methods: {
    getRoles() {
      getRoles().then(({ data }) => {
        this.roles = data
      })
    },
    getFlowRoleTypes() {
      getFlowRoleTypes().then(({ data }) => {
        this.roleTypes = data
      })
    },
    getFlows() {
      getFlows().then(({ data }) => {
        this.jobFlows = data
      })
    },
    getFields() {
      getFields().then(({ data }) => {
        this.fields = data
      })
    },
    getBusinesses() {
      getBusinesses().then(({ data }) => {
        this.businesses = data
      })
    },
    chooseBusiness(val) {
      getBusiness({ id: val }).then(({ data }) => {
        this.flow.Business = data
      })
    },
    getFlowFieldStepTypes() {
      getFlowFieldStepTypes().then(({ data }) => {
        this.fieldStepTypes = data
      })
    },
    doAddJob() {
      if (
        !this.flowJob ||
        !this.flowJob.FLJ_Name ||
        !this.flowJob.FLJ_JobFlowID
      ) {
        this.$message('请输入名称及选择任务流程')
        return
      }
      let flow = this.jobFlows.find(
        (x) => x.FLOW_ID == this.flowJob.FLJ_JobFlowID
      )
      this.flowJob.JobFlowName = flow.FLOW_Name
      this.flowJob.JobBusinessName = flow.BF_Name
      this.flow.Jobs.push(this.flowJob)
      this.flowJob = {}
      this.addJobVis = false
    },
    doRemoveJob(index) {
      this.flow.Jobs.splice(index, 1)
    },
    doAddRole() {
      if (
        !this.flowRole ||
        !this.flowRole.FRL_RoleID ||
        !this.flowRole.FRL_Type
      ) {
        this.$message('请选择角色和权限')
        return
      }
      if (this.flow.Roles.find(x => x.FRL_RoleID == this.flowRole.FRL_RoleID && x.FRL_Type == this.flowRole.FRL_Type)) {
        this.$message('已有相同权限')
        return
      }
      let role = this.roles.find(
        (x) => x.RL_ID == this.flowRole.FRL_RoleID
      )
      this.flowRole.RL_Name = role.RL_Name

      let type = this.roleTypes.find(
        (x) => x.EnumValue == this.flowRole.FRL_Type
      )
      this.flowRole.FRL_TypeDesc = type.Description

      this.flow.Roles.push(this.flowRole)
      this.flowRole = {}
      this.addRoleVis = false
    },
    doRemoveRole(index) {
      this.flow.Roles.splice(index, 1)
    },
    doAddField(f) {
      let formField = {
        ...f,
        FF_Guid: generateGUID(),
        FF_DisplayName: f.FFLD_Label,
        FF_FieldID: f.FFLD_ID,
        FF_Require: true,
        FF_EditAble: true,
        FF_BusinessFieldID: 0,
        props: [],
      }
      formField.props = f.props.map((x) => {
        return {
          ...x,
          FFLP_FieldPropID: x.FLPR_ID,
          FFLP_Name: x.FLPR_Name,
          FFLP_Value: '',
        }
      })
      this.flow.Fields.push(formField)
      this.addFieldVis = false
      this.$forceUpdate()
    },
    removeField(field) {
      let index = this.flow.Fields.findIndex((x) => x.FF_Guid == field.FF_Guid)
      this.flow.Fields.splice(index, 1)
    },
    doSave() {
      saveFlow(this.flow).then(({ data }) => {
        this.$message({
          message: '保存成功',
          type: 'success',
        })
        this.doGetWorkflow(data)
      })
    },
    doGetWorkflow(id) {
      getFlow(id).then(({ data }) => {
        this.flow = data
        this.editingField = null
      })
    },
    startDrag(v) {
      this.editingField = this.customFields[v.oldIndex]
    },
    endDrag() {
      console.log(111)
    },
  },
  mounted() {
    if (this.$route.query.id) {
      this.doGetWorkflow(this.$route.query.id)
    } else {
      this.getBusinesses()
      this.flow = {}
    }
    this.getRoles()
    this.getFlowFieldStepTypes()
    this.getFlowRoleTypes()
    this.getFields()
    this.getFlows()
  },
}
</script>
<style>
.el-tabs__content {
  height: 100%;
}
</style>
<style scoped>
.section {
  background-color: white;
  height: 100%;
  padding: 10px 20px;
  border-radius: 10px;
  box-sizing: border-box;
  overflow: auto;
  width: 100%;
}

.form-design .button-list {
  height: 100%;
  width: 320px;
  padding: 18px 0;
  background-color: white;
  box-sizing: border-box;
  display: block;
}

.form-design .field-button {
  width: 200px;
  height: 45px;
  box-sizing: border-box;
  display: flex;
  background: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #eeeeee;
  align-items: center;
  padding: 0 19px;
  justify-content: space-between;
  user-select: none;
  box-sizing: border-box;
  margin: 6px 0;
}

.field-button-label {
  height: 22px;
  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 22px;
}

.form-design .form-preview {
  margin: 20px 60px;
  height: 95%;
  box-sizing: border-box;
  overflow: auto;
  width: 1000px;
  display: block;
}

.form-field-item {
  width: 706px;
  padding: 0px 5px;
  box-sizing: border-box;
  background: white;
  position: relative;
  background-color: white;
}

.form-field-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  cursor: pointer;
  justify-content: center;
}

.form-field-actived {
  border: 1px solid #12a3ff;
}

.form-design .field-config {
  width: 500px;
  background-color: white;
  height: 100%;
  display: block;
  padding: 20px;
  box-sizing: border-box;
}

.right-section {
  height: calc(100% - 60px);
  overflow-y: auto;
  box-sizing: border-box;
}

.right-section-bottom {
  height: 60px;
  width: 100%;
  display: flex;
  align-items: center;
}
</style>